<!DOCTYPE html>
<html>
<head>
	<meta charset='utf-8'>
	<title>OPTable</title>
	<meta name='renderer' content='webkit'>
	<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
	<meta name='viewport'
				content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0'>
	<link rel='stylesheet' href='../layui/css/layui.css' media='all'>
	<link type="text/css" rel="stylesheet" href="static/iconfont.css" media="all"/>
	<link rel="shortcut icon" href="static/logo.png"/>
	<style>
		.layui-layer {
			box-shadow: none !important;
			border: #a5a5a5 solid 1px;
		}

		.color-select {
			color: #1E9FFF;
		}

		body {
			padding: 0 40px 0 40px;
		}

		/*头部*/
		.layui-card-header > span {
			font-weight: bold;
			font-size: 18px;
			color: #0C0C0C;
		}

		.div-img-logo {
			height: 100px;
			position: fixed;
			left: 0;
			right: 0;
			padding-left: 30px;
			padding-right: 30px;
			top: 0;
			z-index: 999;
			background: #fff;
			border-bottom: #dedede double 1px;
			margin-bottom: 10px;
		}

		.div-img-logo > img {
			margin-top: 30px;
		}

		.div-img-logo > span {
			position: absolute;
			display: inline-block;
			margin-left: 20px;
			padding: 4px;
			margin-top: 58px;
		}

		.version-show {
			margin-left: 6px;
			color: #fff;
		}

		.version-show:hover {
			color: #fff;
			border-bottom: #dedede solid 1px;
		}

		/*码云 数据*/
		.gitee-info a {
			margin-right: 10px;

		}

		.gitee-info a:last-child {
			color: #1E9FFF;
		}

		.gitee-info a:last-child:hover {
			color: #333;

		}

		/*简介*/
		.item-min-about {
			border-left: #1E9FFF solid 6px;
			margin-bottom: 20px;
			background: #f7f7f7;
			min-height: 70px;
			height: auto;
			padding: 5px 5px 5px 20px;
		}

		.item-min-about:last-child {
			border-left: none;
			border-radius: 0;
		}

		.item-min-about div {
			width: 80%;
			display: inline-block;
			height: 25px;
			line-height: 25px;
		}

		/*小标题*/
		.item-min-title {
			width: 100%;
			display: inline-block;
			height: 25px;
			line-height: 25px;
			color: #0C0C0C;
			font-size: 16px;
			font-weight: bold;
			margin-bottom: 20px;
		}

		.item-min-value {
			width: 100%;
			display: inline-block;
			height: 30px;
			margin-left: 20px;
			line-height: 30px;
		}

		.b-ic-group .item {
			width: 60px;
			display: inline-block;
			text-align: center;
			margin-right: 10px;
			vertical-align: top;
		}

		.b-ic-group .item img {
			width: 30px;
			height: 30px;
		}

		.b-ic-group .item span {
			display: inline-block;
			margin-top: 4px;
			width: 60px;
			font-size: 12px;
		}

		/*内容主体*/
		.value-group {
			margin-top: 120px;
			width: 100%;
		}

		/*定位导航 弹出层*/
		#ul-location {
			height: 260px;
			overflow-y: scroll;
			margin-top: 10px;
			display: list-item;
		}

		#ul-location li {
			margin-left: 5px;
			margin-right: 5px;
			height: 30px;
			line-height: 30px;
			list-style-type: disc !important;

		}

		#ul-location li a {
			padding-left: 10px;
			cursor: pointer;
		}

		.div-value-item:first-child {
			margin-top: 0;
		}

		/*栗子 item*/
		.div-value-item {
			margin-top: 40px;
		}

		.span-hint {
			height: 50px;
			line-height: 50px;
			color: #333;
			font-size: 14px;
		}

		.div-value-item .item-child {
			padding: 10px;
			border: #dedede solid 1px;
		}

		.item-open-code .code-open {
			width: 100%;
			height: 50px;
			line-height: 50px;
			text-align: center;
			color: #a5a5a5;
			cursor: pointer;
			background: #dedede;
		}

		.item-open-code .code-open:hover, .code-group span:hover {
			color: #1E9FFF;
		}

		.item-open-code .code-group {
			display: none;
		}

		.code-group span {
			display: block;
			width: 100%;
			text-align: center;
			color: #a5a5a5;
			cursor: pointer;
		}

		.code {
			background-color: #f9fafc;
			padding: 0 4px;
			border: 1px solid #eaeefb;
			border-radius: 4px
		}

		/*分辨率低的 重新调整页面搜索部分宽度空间*/
		@media screen and (max-width: 768px) {
			.div-img-logo {
				height: 60px;
			}

			.div-img-logo img {
				width: 130px;
				margin-top: 18px;
			}

			.div-img-logo span {
				margin-top: 22px;
				height: 15px;
				line-height: 15px;
				font-size: 10px;
			}

			#layui-layer1 {
				display: none !important;
			}
		}

		/*	.opTable-open-td tr:hover {
				background-color: #fff !important;
			}*/
		.span-href {
			color: #1E9FFF;
		}

	</style>
</head>
<body>
<div class='main-div'>
	<div class="div-img-logo">
		<img src="static/OPTable.png"/>
		<span class="layui-badge layui-bg-blue">使用手册
			<a class="version-show"
				 href="https://gitee.com/Hbangmao/layui-op-table/releases"
				 target="_blank"></a>
		</span>
	</div>
	<div class="value-group">

		<div class="values-main">

			<div class="div-value-item">
				<div class="item-min-title">简介</div>
				<div class="item-min-about">
					<div>
						始于
						<a href="https://www.layui.com/doc/modules/table.html" class="color-select"
							 target="_blank"
							 rel="nofollow">Layui Table</a>
						数据列数过多解决方案。
					</div>
					<div>
						<span class="color-select">初衷</span> 体验过类似效果的UI很实用，着手在Layui上实现了一套。
					</div>
					<div>
						此项目 <span class="color-select"> 长期维护 </span>
					</div>
				</div>

				<div class="item-min-title">联系方式</div>
				<div class="item-min-about">
					<div>
						开源地址： <a href="https://gitee.com/Hbangmao/layui-op-table" class="color-select" target="_blank"
										 rel="nofollow">码云下载</a>
					</div>
					<div>
						<a href="https://fly.layui.com/jie/63521/#item-1584498318282" class="color-select" target="_blank"
							 rel="nofollow">Fly社区交流</a>
					</div>
					<div><a>QQ群/作者QQ：730991854 / 1414430109</a></div>
					<div>
						统一Bug异常反馈 <a href="https://gitee.com/Hbangmao/layui-op-table/issues" class="color-select"
												 target="_blank"
												 rel="nofollow"> issues</a>
					</div>
				</div>
			</div>

			<div class="div-value-item">
				<div class="item-min-title">作者</div>
				<span>hubangmao, 热爱 User interaction( UI ) 的Java程序猿, 如果喜欢作者的组件, 可以请作者喝肥仔水 ^_^</span>
			</div>

			<div class="div-value-item">
				<div class="item-min-title">打赏</div>
				<div style="width:152px;">
					<img src="static/ic/ic-wx-pay.png"/>
				</div>
			</div>

			<div class="div-value-item">
				<div class="item-min-title"><a name="download">下载</a></div>
				<div class="gitee-info">
					<a href="https://gitee.com/hbangmao/layui-op-table/stargazers">
						<img src="https://gitee.com/hbangmao/layui-op-table/badge/star.svg?theme=dark" alt="star">
					</a>
					<a href="https://gitee.com/hbangmao/layui-op-table/members"><img
							src="https://gitee.com/hbangmao/layui-op-table/badge/fork.svg?theme=dark" alt="fork">
					</a>
					<a href="https://gitee.com/Hbangmao/layui-op-table" target="_blank">码云下载</a>
				</div>
			</div>

			<div class="div-value-item">
				<div class="item-min-title">兼容</div>
				<div class="b-ic-group">
					<div class="item">
						<img src="static/ic/ic-ie.png">
						<span>IE9+</span>
					</div>
					<div class="item">
						<img src="static/ic/ic-google.png">
						<span>Chrome</span>
					</div>
					<div class="item">
						<img src="static/ic/ic-hh.png">
						<span>火狐</span>
					</div>
					<div class="item">
						<img src="static/ic/ic-xdllq.png">
						<span>现代浏览器</span>
					</div>
				</div>
			</div>

			<div class="div-value-item">
				<div class="layui-elem-quote"><a name="href-demo">Hello Word</a></div>
				<span class="span-hint">我们将不重要的列安排在扩展区域显示(让我们界面排版更美观一些)</span>
				<div class="item-child">
					<table id='test' lay-filter='test'></table>

					<div class="item-open-code">
						<div class="code-open">展开代码</div>
						<div class="code-group">
							<pre class='layui-code layui-code-test'></pre>
							<span>收起代码</span>
						</div>
					</div>

				</div>

			</div>

			<div class="div-value-item">
				<div class="layui-elem-quote"><a name="demo-kpzx">可配属性(全局)</a></div>
				<span class="span-hint">render()函数 支持 layui table 所参数， layui.opTable.render({})</span>
				<div class="item-child">
					<table id='demo-kpzx' lay-filter='demo-kpzx'></table>
				</div>
			</div>

			<div class="div-value-item">
				<div class="layui-elem-quote"><a name="demo-kpzx-cols">表头参数(Cols)</a></div>
				<span class="span-hint">Cols 表头配置项 （继承自layui.table，支持项：）
					<a target="_blank" href="https://www.layui.com/doc/modules/table.html#cols"
						 style="color: #1E9FFF">详情</a></span>
				<div class="item-child">
					<table id='demo-kpzx-cols' lay-filter='demo-kpzx-cols'></table>
				</div>
			</div>

			<div class="div-value-item">
				<div class="layui-elem-quote">
					<a name="demo-qjff">全局方法</a>
				</div>
				<div class="item-child">
					<table id='demo-qjff' lay-filter='demo-qjff'></table>
				</div>
			</div>

			<div class="div-value-item">
				<div class="layui-elem-quote">
					<a name="demo-hdhs">回调方法</a>
				</div>
				<div class="item-child">
					<table id='demo-hdhs' lay-filter='demo-hdhs'></table>
				</div>
			</div>

			<div class="div-value-item">
				<div class="layui-elem-quote"><a name="href-op-tree">展开显示表格</a></div>
				<span class="span-hint">展开显示(普通表格|树形表格)，配置属性（openTable）</span>
				<div class="item-child">
					<table id='test-tree' lay-filter='test-tree'></table>

					<div class="item-open-code">
						<div class="code-open">展开代码</div>
						<div class="code-group">
							<pre class='layui-code layui-code-tree'></pre>
							<span>收起代码</span>
						</div>
					</div>
				</div>
			</div>

			<div class="div-value-item">
				<div class="layui-elem-quote"><a name="href-op-network">展开从网络加载</a></div>
				<span class="span-hint">展开类容过大时可能需要请求服务器获取数据</span>
				<div class="item-child">
					<table id='test2' lay-filter='test2'></table>
					<div class="item-open-code">
						<div class="code-open">展开代码</div>
						<div class="code-group">
							<pre class='layui-code layui-code-test2'></pre>
							<span>收起代码</span>
						</div>
					</div>
				</div>
			</div>

			<div class="div-value-item">
				<div class="layui-elem-quote"><a name="href-icon-setting">图标配置</a></div>
				<span class="span-hint">配置图标案例</span>
				<div class="item-child">
					<table id='icon-setting' lay-filter='icon-setting'></table>
					<div class="item-open-code">
						<div class="code-open">展开代码</div>
						<div class="code-group">
							<pre class='layui-code layui-code-icon-setting'></pre>
							<span>收起代码</span>
						</div>
					</div>
				</div>
			</div>

			<div class="div-value-item">
				<div class="layui-elem-quote">
					<a name="href-more">相关动态操作</a></div>
				<span class="span-hint">展示一些动态操作的栗子</span>
				<div class="item-child">
					<table id='test3' lay-filter='test3'></table>
					<div class="item-open-code">
						<div class="code-open">展开代码</div>
						<div class="code-group">
							<pre class='layui-code layui-code-test3'></pre>
							<span>收起代码</span>
						</div>
					</div>
				</div>
			</div>

		</div>

	</div>

	<div style="text-align: center">
		<img src="static/logo.png" title="logo" style="height: 80px;margin-top: 80px"/>
	</div>

</div>


<script type='text/html' id='toolDemo'>
	<a class='layui-btn  layui-btn-primary layui-btn-xs' lay-event='openAll'>展开全部</a>
	<a class='layui-btn  layui-btn-primary layui-btn-xs' lay-event='closeAll'>关闭全部</a>
</script>
<script type='text/html' id='barDemo'>
	<a class='layui-btn layui-btn-xs' lay-event='edit'>编辑</a>
	<a class='layui-btn layui-btn-danger layui-btn-xs' lay-event='del'>删除</a>
</script>
<script type="text/html" id="moreDemo">

	<a class='layui-btn  layui-btn-primary layui-btn-xs' lay-event='reload'>重载</a>
	<a class='layui-btn  layui-btn-primary layui-btn-xs' lay-event='getLayuiTable'>查看当前Layui Table 对象</a>
	<a class='layui-btn  layui-btn-primary layui-btn-xs' lay-event='opOrientation'>(水平|垂直)排列</a>

	<a class='layui-btn  layui-btn-primary layui-btn-xs' lay-event='openAll'>展开全部</a>
	<a class='layui-btn  layui-btn-primary layui-btn-xs' lay-event='closeAll'>关闭全部</a>

	<a class='layui-btn   layui-btn-xs' lay-event='openIndex'>展开(指定下标)</a>
	<a class='layui-btn   layui-btn-xs' lay-event='closeIndex'>关闭(指定下标)</a>
	<a class='layui-btn   layui-btn-xs' lay-event='toggleOpenIndex'>toggle(指定下标)</a>

</script>
<script type="text/html" id="treeTable">
	<a class='layui-btn  layui-btn-primary layui-btn-xs' lay-event='openTreeChildTable'>展开全部子表</a>
	<a class='layui-btn  layui-btn-primary layui-btn-xs' lay-event='closeTreeChildTable'>关闭全部子表</a>
</script>
<script type='text/html' id='toolDemoIconSet'>
	<a class='layui-btn  layui-btn-primary layui-btn-xs' lay-event='setOpenColumn'>将展开显示在3列</a>
</script>
<script src='../layui/layui.js'></script>

<!--1、普通 案例-->
<script id='layui-code-test'>
  layui.config({
    //  配置 layui 第三方扩展组件存放的基础目录
    base: '..'
  }).extend({
    opTable: '/opTable/opTable'
  }).use(['opTable'], function () {
    setTimeout(function () {
      layer.msg("Hello Word . ");
    }, 400);

    var opTable = layui.opTable.render({
      elem: '#test'
      , id: '#test'
      , url: 'static/test.json'
      , toolbar: '#toolDemo'
      , page: true
			,isAloneColumn:false
      , cols: [[
        {field: 'id', title: 'ID', sort: true}
        , {
          field: 'username', title: '用户名', edit: true, templet: function (item) {
            return item['username']
          }
        }
        , {field: 'classify', title: '职业'}
        , {field: 'city', title: '城市', edit: true}
        , {title: '操作', toolbar: '#barDemo', width: 150, align: "center"}
      ]]

      //  展开的列配置
      , openCols: [
        {
          field: 'sex',opHelp:{text:'测试'}, title: '性别嗯嗯嗯', onDraw: function (item) {
            return item.sex;
          }
        }
        , {field: 'logins', title: '登录名', edit: true}
        , {field: 'sign', title: '签名'}
        , {field: 'wealth', title: '财富'}
        , {field: 'experience', title: '经验值'}
        , {field: 'experience', title: '积分'}
        , {field: 'score', title: '分数', edit: true}
      ]
      , onEdit: function (data) {
        layer.msg(JSON.stringify(data));
      }, openType: 0
    });

    layui.table.on('toolbar(test)', function (obj) {
      if (obj.event === 'openAll') {
        opTable.openAll();
        layer.msg("展开全部 isOpenAll: " + opTable.isOpenAll());
      } else if (obj.event === 'closeAll') {
        opTable.closeAll();
        layer.msg("关闭全部 isOpenAll: " + opTable.isOpenAll())
      }
    });

    //  可忽略
    setTimeout(function () {
      layui.$('.layui-code-test').text(layui.$('#layui-code-test').html())
    }, 20)
  });
</script>

<!--2、网络加载 案例-->
<script id='layui-code-test2'>
  layui.config({
    base: '..'
  }).extend({
    opTable: '/opTable/opTable'
  }).use(['opTable'], function () {
    layui.opTable.render({
      elem: '#test2'
      , id: '#test2'
      , url: 'static/test.json'
      , cols: [[
        {field: 'id', title: 'ID', sort: true}
        , {field: 'username', title: '用户名', edit: true}
        , {field: 'city', title: '城市', edit: true}
      ]],

      //  展开的列从网络加载
      openNetwork: {
        openCols: [
          {field: 'sign', title: '签名'}
          , {field: 'wealth', title: '财富'}
          , {field: 'experience', title: '积分'}
          , {field: 'classify', title: '职业'}
        ],
        /**
         *
         * @param data 当前行数据
         * @param success 成功
         * @param message 显示异常消息[没有数据 出错 等]
         */
        onNetwork: function (data, success, message) {
          // 从网络加载
          layui.$.ajax({
            type: "get",
            url: "static/test1.json",
            dataType: "json",
            data: {id: data.id},
            async: true,
            success: function (resp) {
              if (resp.code === 200) {
                setTimeout(function () {
                  if (data.id === 10000) {
                    message("加载出错");
                  } else {
                    success(resp.data);
                  }
                }, 200);
              } else {
                message("没有数据");
              }
            },
            error: function (err) {
              message("加载出错");
            }
          });
        }
      }
      , onSort: function (obj) {
        console.log(obj)
      }
      , opOrientation: 'h'
    });


    setTimeout(function () {
      layui.$('.layui-code-test2').text(layui.$('#layui-code-test2').html())
    }, 20)
  });
</script>

<!--3、普通的完整操作-->
<script id='layui-code-test3'>
  layui.config({
    base: '..'
  }).extend({
    opTable: '/opTable/opTable'
  }).use(['opTable'], function () {
    var opTable = layui.opTable.render({
      elem: '#test3'
      , id: '#test3'
      , url: 'static/test.json'
      , toolbar: '#moreDemo'
      , cols: [[
        {field: 'id', title: 'ID', sort: true}
        , {field: 'username', title: '用户名', opHelp: {text: '主要用于论坛中作为昵称展示。', tipOpt: {}}, edit: true}
        , {field: 'city', title: '城市', edit: true}
        , {title: '操作', toolbar: '#barDemo', width: 150, align: 'center'}
      ]]

      //展开的列配置
      , openCols: [
        //  1、普通文本
        {field: 'sign', title: '签名', opHelp: {text: '设置属于你的签名吧 。', tipOpt: {}}}
        //	2、自定义渲染内容
        , {
          field: 'wealth', width: 137, title: '财富', templet: function (item) {
            var arr = [];
            arr.push('<span class="openTable-item-title">财富：</span>' + '<span>' + item.wealth + '</span>');

            if (item.wealth < 100000) {
              arr.push('<span class="layui-badge" style="margin-left: 6px">农民</span>')
            } else {
              arr.push('<span class="layui-badge" style="margin-left: 6px">富豪</span>')
            }
            return arr.join('');
          }
        }
        //  3、当绘制内容时回调
        , {field: 'experience', title: '积分', edit: true}
        , {
          field: 'score', title: '分数', onDraw: function (it) {
            return it.score + " keg"
          }
        }
        //	5、可选择的类型 select
        , {
          field: 'classifyName',
          title: '职业',
          type: 'select',
          items: function (lineData) {
            return getTestItems();
          },
          /**
           * 绘制 <option></option>  回调
           * @param it （循环items参数时的子项）
           * @param data 当前表格数据
           * @returns {{isSelect: boolean, id: *, value: *}} 统一返回使用参数
           */
          onDraw: function (it, data) {
            return {id: it.id, value: it.title, isSelect: (it.id === data.classifyId)};
          },

          /**
           *发生选择时回调
           * @param it 下拉选择数据
           * @param item 当前表格数据
           * @returns {boolean} true ：代表发生了修改 会回调 onEdit()相反则不会
           *
           * 这样设计考虑到实际环境可能做不到统一
           */
          isEdit: function (it, item) {
            console.log(it.value, item["classifyId"]);
            //选中的value !=默认数据代表被修改
            return parseInt(it.value) !== parseInt(item["classifyId"]);
          }
        }
      ]

      //监听排序
      , onSort: function (obj) {
        console.log(obj)
      }

      //监听修改
      , onEdit: function (obj) {
        layer.msg("修改内容：已输出到日志窗口");
        console.log(obj)
      }
      /**
       * 当初始化成功回调
       * @param itemData 行数据
       * @param itemIndex 展开行下标
       * @param dom 展开的 dom
       * @param childTable 当展开区域内容为表格时此时为子表实例 || null
       */
      , onInitSuccess: function (itemData, itemIndex, dom, childTable) {
        console.log("onInitSuccess", '行数据：', itemData, "行下标：" + itemIndex, "行dom元素", dom, "子表实例：", childTable)
      },
      /**
       * 当展开时回调
       * @param itemData 行数据
       * @param itemIndex 展开行下标
       * @param dom 展开的 dom
       * @param childTable 当展开区域内容为表格时此时为子表实例 || null
       */
      onOpen: function (itemData, itemIndex, dom, childTable) {
        console.log("onOpen", '行数据：', itemData, "行下标：" + itemIndex, "行dom元素", dom, "子表实例：", childTable)
      },
      /**
       * 当关闭时回调
       * @param itemData 行数据
       * @param itemIndex 展开行下标
       */
      onClose: function (itemData, itemIndex) {
        console.log("onClose", itemData)
      },
      // 当展开全部时回调
      onOpenAll: function () {
        console.log("onOpenAll")
      },
      // 当关闭全部时回调
      onCloseAll: function () {
        console.log("onCloseAll")
      },
      /**
       * 小项区域点击回调
       * @param obj
       */
      onItemClick: function (obj) {
        console.log("onItemClick", obj)
      }

      // 见文档
      , openType: 1
    });
    var status;
    // 监听工具栏
    layui.table.on('toolbar(test3)', function (obj) {

      if (obj.event === 'openAll') {
        opTable.openAll();
        layer.msg("展开全部 isOpenAll: " + opTable.isOpenAll());
      } else if (obj.event === 'closeAll') {
        opTable.closeAll();
        layer.msg("关闭全部 isOpenAll: " + opTable.isOpenAll())
      } else

      // 1、重载
      if (obj.event === "reload") {
        // {} 可以是layui.table的所有的参数哟
        opTable.reload({opOrientation: "h", where: {id: 1}});
      }
      // 2、获取当前 layui table 引用
      else if (obj.event === "getLayuiTable") {
        layer.msg("已输出到日志窗口");
        console.log(opTable.config.table)
      }
      // 4、水平或垂直排列内容
      else if (obj.event === "opOrientation") {
        opTable.reload({opOrientation: opTable.config.opOrientation === "v" ? "h" : "v"});
        setTimeout(function () {
          // 展开第一行
          opTable.openIndex(0);
          layer.msg(opTable.config.opOrientation);
        }, 40)
      }
      // 5、展开指定下标
      else if (obj.event === "openIndex") {
        status = opTable.openIndex(0);
        layer.msg(status);
      }
      // 6、关闭指定下标
      else if (obj.event === "closeIndex") {
        status = opTable.closeIndex(0);
        layer.msg(status);
      }
      // 7指定下标 关闭则展开 反之亦然
      else if (obj.event === "toggleOpenIndex") {
        status = opTable.toggleOpenIndex(0);
        layer.msg(status);
      }
    });

    //   监听行工具事件
    layui.table.on('tool(test3)', function (obj) {
      var data = obj.data;
      if (obj.event === 'del') {
        layer.msg("删除：" + JSON.stringify(obj.data, null, "\t"));
      } else if (obj.event === 'edit') {
        layer.msg("编辑：" + JSON.stringify(obj.data, null, "\t"));
      }
    });

    function getTestItems() {
      return [{id: 1, value: '作家', isSelect: true}, {id: 2, value: '诗人'}, {id: 3, value: '酱油'}, {id: 4, value: '校长'}];
    }

    //可忽略
    setTimeout(function () {
      layui.$('.layui-code-test3').text(layui.$('#layui-code-test3').html())
    }, 20)
  });
</script>

<!--4、图标配置-->
<script id='layui-code-icon-setting'>
  layui.config({
    //  配置 layui 第三方扩展组件存放的基础目录
    base: '..'
  }).extend({
    opTable: '/opTable/opTable'
  }).use(['opTable'], function () {
    var opTable = layui.opTable.render({
      elem: '#icon-setting'
      , id: 'icon-setting'
      , url: 'static/test.json'
      , toolbar: '#toolDemoIconSet'
      // 第一列显示展开
      , openColumnIndex: 0
      // 不单独占一列
      , isAloneColumn: false
      , opOrientation: 'h'
      , openIcon: {
        '-1': 'static/ic-open/ic-1.png',
        '2': 'static/ic-open/ic-3.svg',
        '3': 'static/ic-open/ic-1.png',
        '1': 'static/ic-open/ic-1.png',
        '6': 'static/ic-open/ic-4.png',
        '7': 'static/ic-open/ic-4.png',
        '8': 'static/ic-open/ic-4.png'
      }
      , cols: [[
        {field: 'id', title: 'ID', width: 100}
        , {field: 'username', title: '用户名', edit: true}
        , {field: 'logins', title: '登录名', edit: true}
        , {field: 'city', title: '城市', edit: true}
        , {title: '操作', toolbar: '#barDemo', width: 150, align: "center"}
      ]]

      //  展开的列配置
      , openCols: [
        {field: 'sex', title: '性别'}
        , {field: 'sign', title: '签名'}
        , {field: 'wealth', title: '财富'}
        , {field: 'experience', title: '经验值'}
        , {field: 'experience', title: '积分'}
        , {field: 'score', title: '分数', edit: true}
        , {field: 'classify', title: '职业'}
      ]
      , onEdit: function (data) {
        layer.msg("修改内容已输出到日志窗口");
      }, openType: 0
    });


    var isNewSetting = false;
    layui.table.on('toolbar(icon-setting)', function (obj) {
      if (obj.event === 'setOpenColumn') {
        if (isNewSetting) {
          // 更新配置参数
          opTable.reload({openColumnIndex: 0, isAloneColumn: false});
        } else {
          // 更新配置参数
          opTable.reload({openColumnIndex: 2, isAloneColumn: true});
        }
        isNewSetting = !isNewSetting;

        layui.$("a[lay-event='setOpenColumn']").text(isNewSetting ? "还原到1列合并显示" : "将展开显示到第3列");
      }
    });


    //  可忽略
    setTimeout(function () {
      layui.$('.layui-code-icon-setting').text(layui.$('#layui-code-icon-setting').html())
    }, 20)

  });
</script>

<!--5、展开显示表格-->
<script id='href-op-tree'>
  layui.config({
    base: '..'
  }).extend({
    opTable: '/opTable/opTable'
  }).use(['opTable'], function () {
    var opTable = layui.opTable.render({
      elem: '#test-tree'
      , id: '#test-tree'
      , url: 'static/test.json'
      , cols: [[
        {field: 'id', title: 'ID', sort: true}
        , {field: 'username', title: '用户名', edit: true}
        , {field: 'city', title: '城市', edit: true}
      ]]
      /**
       * 展开显示树形表格
       * @param itemData 当前行数据
       * @returns
       *
       * 说明子表的 lay-filter='filter' 值与ID参数相同(去掉 # .)
       */
      , openTable: function (itemData) {
        return {
          elem: '#child_1_' + itemData.LAY_INDEX
          , id: 'child_1_' + itemData.LAY_INDEX
          , url: 'static/test2.json'
          , page: true
          , cols: [[
            {field: 'id', title: 'ID', edit: true}
            , {field: 'username', title: '用户名'}
            , {field: 'logins', title: '登录名'}
          ]]
          , openTable: function (itemData) {
            return {
              elem: '#child_2_' + itemData.LAY_INDEX
              , id: 'child_2_' + itemData.LAY_INDEX
              , url: 'static/test2.json'
              , page: true
              , cols: [[
                {field: 'id', title: 'ID', edit: true}
                , {field: 'username', title: '用户名'}
                , {field: 'logins', title: '登录名'}
              ]]
              , openTable: function (itemData) {
                return {
                  elem: '#child_3_' + itemData.LAY_INDEX
                  , id: 'child_3_' + itemData.LAY_INDEX
                  , url: 'static/test2.json'
                  , openVisible: false
                  , cols: [[
                    {field: 'id', title: 'ID', edit: true}
                    , {field: 'username', title: '用户名'}
                    , {field: 'logins', title: '登录名'}
                    , {field: 'city', title: '城市'}
                    , {field: 'classify', title: '职业'}
                    , {field: 'wealth', title: '财产值'}
                    , {field: 'experience', title: '人气值'}
                    , {field: 'score', title: '分数'}
                    , {title: '操作', toolbar: '#barDemo', width: 150}
                  ]]
                  , done: function () {
                    //  监听子表 修改
                    layui.table.on('edit(' + 'child' + itemData.LAY_INDEX + ')', function (obj) {
                      layer.msg(JSON.stringify(obj.data, null, "\t"));
                    });
                  }
                  , onEdit: function (data) {
                    console.log("表格4修改", data)
                  }
                }
              }
              , onEdit: function (data) {
                console.log("表格3修改", data)
              }
            }
          }
          , onEdit: function (data) {
            console.log("表格2修改", data)
          }
        }
      }
      , openType: 1
      , onEdit: function (data) {
        console.log("表格1修改", data)
        layer.msg(JSON.stringify(data));
      }
      , onInitSuccess: function (itemData, itemIndex, dom, childTable) {
        console.log("onInitSuccess", '行数据：', itemData, "行下标：" + itemIndex, "行dom元素", dom, "子表实例：", childTable);
      },
      /**
       * 当展开时回调
       * @param itemData 行数据
       * @param itemIndex 展开行下标
       * @param dom 展开的 dom
       * @param childTable 当展开区域内容为表格时此时为子表实例 || null
       */
      onOpen: function (itemData, itemIndex, dom, childTable) {
        console.log("onOpen", '行数据：', itemData, "行下标：" + itemIndex, "行dom元素", dom, "子表实例：", childTable)
      }
    });

    setTimeout(function () {
      layui.$('.layui-code-tree').text(layui.$('#href-op-tree').html())
    }, 20);
  });
</script>

<!--页面代码-->
<script>
  layui.config({
    base: '..'
  }).extend({
    opTable: '/opTable/opTable'
  }).use(['table'], function () {
    var $ = layui.$;

    var root = {
      init: function () {
        $(".version-show").html('V ' + layui.opTable.openTableVersion);

        layer.open({
          type: 1
          , title: '导航'
          , content: '<ul id="ul-location"></ul>'
          , id: 'LAY-system-view-popup'
          , skin: 'layui-layer-admin'
          , shadeClose: false
          , closeBtn: 1
          , shade: 0
          , offset: ['30%', '90%']
          , success: function (layero, index) {
            var items = [
              {title: "Hello Word", href: 'href-demo'},
              {title: "下载", href: 'download'},
              {title: "可配属性(全局)", href: 'demo-kpzx'},
              {title: "表头参数(Cols)", href: 'demo-kpzx-cols'},
              {title: "全局方法", href: 'demo-qjff'},
              {title: "回调方法", href: 'demo-hdhs'},
              {title: "展开显示表格", href: 'href-op-tree'},
              {title: "展开从网络加载", href: 'href-op-network'},
              {title: "图标配置", href: 'href-icon-setting'},
              {title: "相关动态操作", href: 'href-more'}

            ];
            items.forEach(function (item) {
              $("#ul-location").append("<li> <a data='" + item.href + "'>" + item.title + "</a></li>");
              var tags = layui.$("#ul-location").find("li");
              tags.unbind("click").click(function () {
                tags.each(function (i) {
                  tags.eq(i).children("a").css("color", "#333");
                });
                $(this).children("a").css("color", "#1E9FFF");

                $(".layui-elem-quote a").css("color", "#777")
                var soDom = 'a[name="' + $(this).children('a').attr('data') + '"]';
                $('html,body').animate({scrollTop: $(soDom).offset().top - 130}, 500, null, function () {
                  $(soDom).css('color', '#1E9FFF').fadeOut(80).fadeIn(40);
                });
              });


            });
          }
        });

        //	展开代码
        $(".item-open-code .code-open").click(function () {
          var that = $(this);
          var open = parseInt(that.attr('data') || 1);
          that.parent().find(".code-group").stop().slideToggle(400);
          that.text(open === 1 ? "收起代码" : "展开代码");
          that.attr("data", open === 1 ? 0 : 1);
        });

        $(".code-group span").click(function (e) {
          layui.stope(e);
          $(this).parent().parent().find(".code-open").click();
        });


        this.initTableKpzx();
        this.initTableKpzxCols();
        this.initTableQjff();
        this.initTableHdhs();

        root.initScroll();
      },
      // 初始化 地址栏参数滚动
      initScroll: function (value, openCode) {
        function getValue(name, def) {
          var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
          var r = decodeURI(window.location.search).substr(1).match(reg);
          if (r != null) {
            return unescape(r[2]);
          }
          return def;
        }

        value = value || getValue("href");
        // 滚动到指定位置
        if (value) {
          setTimeout(function () {
            var dom = layui.$("a[data='" + value + "']");
            dom.click();
            dom.length <= 0 && layer.msg("无法定位：" + value);
            setTimeout(function () {
              // 是否展开代码区域
              if (openCode) {
                $('a[name="' + value + '"]').parent().parent().find(".code-open").click();
              }
            }, 100);
          }, 100);
        }

        // 展开示例代码位置
        var openIndex = getValue("openIndex");
        if (openIndex) {
          this.initTableKpzx(openIndex);
        }


      }
      // 可配置属性(全局)
      , initTableKpzx: function (openIndex) {

        /*可配属性*/
        layui.opTable.render({
          elem: '#demo-kpzx'
          , id: '#demo-kpzx'
          , cols: [[
            {field: 'parameter', title: '参数名称', width: 180}
            , {field: 'type', title: '类型', width: 120}
            , {field: 'doc', title: '描述'}
            , {field: 'version', title: '版本', width: 160}
          ]]
          , data: [
            {
              parameter: 'openVisible',
              type: 'boolean',
              doc: '是否支持展开操作，默认：true 开启可展开操作 ',
              code: "",
              version: 'v1.3'
            },
            {
              parameter: 'isOpenAllClick',
              type: 'boolean',
              doc: '是否支持展开全部',
              code: "",
              version: 'v1.3'
            },
            {
              parameter: 'openCols',
              type: 'Array',
              doc: '展开列配置，类似 layui.table 【cols】',
              code: $("#layui-code-test").html()
            },
            {
              parameter: 'openColumnIndex',
              type: 'Number',
              doc: '在指定列中显示创建展开操作',
              code: "",
              version: "v1.2"
            },
            {
              parameter: 'isAloneColumn',
              type: 'boolean',
              doc: '是否单独占一列(默认 true)',
              code: "",
              version: "v1.2"
            },
            {
              parameter: 'openIcon',
              type: 'Object',
              doc: '展开图标设置 (图片支持： svg base64 png) ',
              code: "openIcon:{-1':'展开全部图片资源路径'0:'所有item图片路径','1':'image/icon-1.png','2':image/icon-1.png'}",
              version: "v1.2"
            },
            {
              parameter: 'openTable',
              type: 'Function',
              doc: '详见【展开显示表格】案例',
              code: $("#layui-code-test1").html()
            },
            {
              parameter: 'openNetwork',
              type: 'Object',
              doc: '详见【展开网络加载】案例',
              code: $("#layui-code-test2").html()
            },
            {
              parameter: 'opOrientation',
              type: 'String',
              doc: '展开的item的展示方式： 垂直(v、v2、v3、v4)|水平h  默认为垂直排列 ',
              code: "opOrientation:'v'//一个Item占一行" +
                  "\nopOrientation:'v2'//两个Item占一行" +
                  "\nopOrientation:'v3'//三个Item占一行" +
                  "\nopOrientation:'v4'//四个Item占一行" +
                  "\n\nopOrientation:'h'//水平排列空间分配完后，自动换行。"
            },
            {
              parameter: 'openType',
              type: 'Number',
              doc: 'openType 0、默认效果同时只展开一项  1、点击展开时不关闭之前展开的类容',
              code: ""
            },
            {
              parameter: 'slideDownTime',
              type: 'Number',
              doc: '展开动画执行时长(毫秒) 默认：200',
              code: ""
            },
            {
              parameter: 'slideUpTime',
              type: 'Number',
              doc: '关闭动画执行时长(毫秒) 默认：100',
              code: ""
            }
          ]
          , limit: 20
          , openCols: [{
            field: 'code', title: '示例值', templet: function (it) {
              if (!it.code) {
                return "暂无示例代码"
              }
              return "<h5>示例代码</h5><pre class='layui-code'>" + it.code + "</pre>";
            }
          }]
        }).openIndex(openIndex);
      }
      // 可配置属性(Cols)item
      , initTableKpzxCols: function (openIndex) {

        /*可配属性*/
        layui.opTable.render({
          elem: '#demo-kpzx-cols'
          , id: '#demo-kpzx-cols'
          , cols: [[
            {field: 'parameter', title: '参数名称', width: 180}
            , {field: 'type', title: '类型', width: 120}
            , {field: 'par', title: '所属父级'}
            , {field: 'doc', title: '描述'}
            , {field: 'version', title: '版本', width: 160}
          ]]
          , data: [
            {
              parameter: 'opHelp',
              type: 'Object',
              par: 'openCols|Cols',
              doc: '显示帮助文字',
              version: 'v1.3',
              code: " ... openCols: [\n"
                  + "        //  1、普通文本\n"
                  + "        {field: 'sign', title: '签名', <span style='color:red'>opHelp</span>: {text: '设置属于你的签名吧 。', tipOpt: {}}}}\n"
                  + "] ..."
            },
            {
              parameter: 'templet',
              type: 'function',
              par: 'openCols',
              doc: '区别于 onDraw，不会保留展开区域标题文字。',
              version: 'v1.3',
              code: ""
            },
            {
              parameter: 'onDraw',
              type: 'function',
              par: 'openCols',
              doc: '区别于 templet，会保留展开区域小项标题文字。 <span class="span-href" name="href-more" openCode="true">详情</span>',
              version: 'v1.3',
              code: "... openCols: [ {\n"
                  + "          field: 'score', title: '分数', <span style='color:red'>onDraw</span>: function (it) {\n"
                  + "            return it.score + \" keg\"\n"
                  + "          }\n"
                  + "        }\n] "
            },
            {
              parameter: 'type',
              type: 'text',
              par: 'openCols',
              doc: '展开小项类型，目前支持：[select]  <span class="span-href" name="href-more" openCode="true">详情</span>',
              version: 'v1.3',
              code: ''
            }
          ]
          , limit: 20
          , openCols: [{
            field: 'code', title: '示例值', templet: function (it) {
              if (!it.code) {
                return "暂无示例代码"
              }
              return "<h5>示例代码</h5><pre class='layui-code'>" + it.code + "</pre>";
            }
          }]
        }).openIndex(openIndex);
      }
      // 全局方法
      , initTableQjff: function () {
        layui.table.render({
          elem: '#demo-qjff'
          , id: '#demo-qjff'
          , cols: [[
            {field: 'name', title: '方法名称'}
            , {field: 'doc', title: '说明'}
            , {field: 'parameter', title: '方法参数'}
            , {field: 'return', title: '返回值'}
          ]]
          , data: [
            {
              name: 'reload()',
              doc: '重载',
              parameter: '重载参数',
              return: "返回当前实例(一般用于 连续调用)"
            },
            {
              name: 'openAll()',
              doc: '展开全部',
              parameter: '无',
              return: "返回当前实例(一般用于 连续调用)"
            },
            {
              name: 'closeAll()',
              doc: '关闭全部',
              parameter: '无',
              return: "返回当前实例(一般用于 连续调用)"
            },
            {
              name: 'openIndex()',
              doc: '通过下标展开一行',
              parameter: 'index',
              return: "( true | false ) 成功或失败 false一般为下标越界"
            },
            {
              name: 'closeIndex()',
              doc: '通过下标关闭一行',
              parameter: 'index',
              return: "( true | false ) 成功或失败 false一般为下标越界"
            },
            {
              name: 'toggleOpenIndex()',
              doc: '指定下标 关闭则展开 反之亦然',
              parameter: 'index',
              return: "( true | false ) 成功或失败 false一般为下标越界"
            },
            {
              name: 'isOpenAll()',
              doc: '当前状态是否为全部打开的',
              parameter: '',
              return: "( true | false )"
            }
          ]
        });
      }
      // 回调方法
      , initTableHdhs: function () {
        layui.table.render({
          elem: '#demo-hdhs'
          , id: '#demo-hdhs'
          , cols: [[
            {field: 'name', title: '方法名称'}
            , {field: 'doc', title: '说明'}
            , {field: 'parameter', title: '回传参数'}
            , {field: 'return', title: '返回值'}
          ]]
          , data: [
            {
              name: 'onInitSuccess(itemData,itemIndex,dom,childTable)',
              doc: '当展开处的内容创建成功时回调',
              parameter: '回传必要参数',
              return: "无"
            }

            , {
              name: 'onEdit(obj)',
              doc: '当发生修改时回调',
              parameter: '当前被修改的信息',
              return: "无"
            }, {
              name: 'onSort(obj)',
              type: 'function',
              doc: '当监听到排序后回调',
              parameter: "回传必要参数",
              return: ""
            },
            {
              name: 'onOpen(itemData,index,dom,childTable)',
              doc: '当展开时回调',
              parameter: '回传必要参数',
              return: "无"
            }, {
              name: 'onClose(itemData,index,dom)',
              doc: '当关闭时回调',
              parameter: '回传必要参数',
              return: "无"
            }, {
              name: 'onOpenAll()',
              doc: '当展开全部时回调',
              parameter: '无',
              return: "无"
            }, {
              name: 'onCloseAll()',
              doc: '当关闭全部时回调',
              parameter: '无',
              return: "无"
            }, {
              name: 'onItemClick(obj)',
              doc: '当被点击时回调',
              parameter: '回传必要参数',
              return: "无"
            }
          ]
        });
      }

    };

    setTimeout(function () {
      root.init();
    }, 50);

    setTimeout(function () {
      // 滚动页面
      layui.$(".span-href").click(function () {
        var that = $(this);
        var name = that.attr("name")
            , openCode = that.attr("openCode");

        root.initScroll(name, openCode);
      });

    }, 2000);

  });


</script>


<!--各种点击监听集-->
<script>
  layui.use(["table"], function () {
    //   ↓↓↓↓↓↓↓↓↓↓ 工具栏点击案例 ↓↓↓↓↓↓↓↓↓↓

    //   监听行工具事件
    layui.table.on('tool(test)', function (obj) {
      var data = obj.data;
      if (obj.event === 'del') {
        layer.msg("删除：" + JSON.stringify(obj.data, null, "\t"));
      } else if (obj.event === 'edit') {
        layer.msg("编辑：" + JSON.stringify(obj.data, null, "\t"));
      }
    });


  })
</script>
</body>
</html>


